<template>
  <div :class="{'set-content-div': showKeyboard, 'content-div': !showKeyboard}">
    <div class="head-img mb8" src="" alt="">
      <div class="title-div">
        <span v-if="orderInfo.state === '1'">已发起</span>
        <span v-if="orderInfo.state === '2'">已付款</span>
        <span v-if="orderInfo.state === '3'">已接单</span>
        <span v-if="orderInfo.state === '5'">服务中</span>
        <span v-if="orderInfo.state === '6'">已完成</span>
        <span v-if="orderInfo.state === '7'">已验收/待评价</span>
        <span v-if="orderInfo.state === '8'">已评价</span>
      </div>
      <div class="title-div1">
        <span v-if="orderInfo.state === '1'">订单已发起</span>
        <span v-if="orderInfo.state === '2'">订单已付款</span>
        <span v-if="orderInfo.state === '3'">您的订单待服务</span>
        <span v-if="orderInfo.state === '5'">订单服务中</span>
        <span v-if="orderInfo.state === '6'">您的订单待服务已完成等待验收</span>
        <span v-if="orderInfo.state === '7'">您的订单待服务已验收/待评价</span>
        <span v-if="orderInfo.state === '8'">您的订单待服务已评价</span>
      </div>
    </div>
    <div>
      <div class="info-detail">
        <div class="info-detail-title mb5">
          <span>订单信息</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">服务项目</span>
          <span class="color-23" id="right">{{orderInfo.give_service_name}}</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">订单编号</span>
          <span class="color-23" id="right">{{orderInfo.order_number}}</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">下单时间</span>
          <span class="color-23" id="right">{{orderInfo.createTime}}</span>
        </div>
      </div>
      <div class="info-detail mt8">
        <div class="info-detail-title mb5">
          <span>预约信息</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">期望就诊时间</span>
          <span class="color-23" id="right">{{orderInfo.expectedTime}}</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">就诊医院</span>
          <span class="color-23" id="right">{{orderInfo.hospital_name}}</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">科室</span>
          <span class="color-23" id="right">{{orderInfo.department_name}}</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">就诊人</span>
          <span class="color-23" id="right">{{orderInfo.visitor_name}}</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">就诊人电话</span>
          <span class="color-23" id="right">{{orderInfo.visitor_tel}}</span>
        </div>
      </div>
      <div class="info-detail mt8">
        <div class="info-detail-title mb5">
          <span>价格信息</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">我的报价</span>
          <span class="color-23" id="right">¥{{orderInfo.payable_amount}}</span>
        </div>
        <div class="info-detail-name color-999">
          <span id="left">支付价格</span>
          <span class="color-23" id="right">¥{{orderInfo.pay_amount || 0}}</span>
        </div>
      </div>
      <div class="info-detail mt8" v-if="orderInfo.state === '6'">
        <div class="info-detail-title mb5">
          <span>填写确认码:</span>
        </div>
        <van-password-input
          :value="value"
          info="密码为 6 位数字"
          :mask="false"
          :error-info="errorInfo"
          :focused="showKeyboard"
          @focus="bodyScrollTop"
        />
        <div class="info-detail-title mb5">
          <div style="text-align: center;color: #969799;">确认码在客户手机订单中</div>
        </div>
        <van-number-keyboard
          v-model="value"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
      </div>
    </div>
    <div class="gn-btn-box" v-if="orderInfo.state === '2'">
      <div class="gn-btn"  @click="saveOrder('3', '抢单')">抢单¥{{orderInfo.payable_amount}}</div>
    </div>
    <div class="gn-btn-box" v-if="orderInfo.state === '3'">
      <div class="gn-btn"  @click="signIn()">开始服务</div>
    </div>
    <div class="gn-btn-box" v-if="orderInfo.state === '5'">
      <div class="gn-btn"  @click="saveOrder('6', '完成服务')">完成服务</div>
    </div>
    <div class="gn-btn-box" v-if="orderInfo.state === '6'">
      <div class="gn-btn"  @click="verification()">去核验</div>
    </div>
    <!-- <div class="gn-btn-box" v-if="orderInfo.state === '7'">
      <div class="gn-btn"  @click="evaluate()">立即评价</div>
    </div> -->
  </div>
</template>
<script>
import { getOrderDetails, saveOrderGoodsNext } from '@/api/medical.js'
import { Toast, Dialog } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      value: '',
      errorInfo: '',
      showKeyboard: false,
      isShowAll: false,
      active_tab: 0,
      waiterInfo: {
        id: '1',
        img: 'https://hqpz.tanjirj.com/uploads/images/20221010/93a6dfb0654140a8b469fdc331254110.jpg',
        name: 'xxxxxx陪诊师',
        sex: '男',
        age: '30',
        hage: '5',
        num: '5',
        phone: '18888888888',
        pev: '80',
        plnum: '10',
        jg: '沈阳市',
        hospital: '沈阳市医大一院/沈阳市盛京医院/陆军总院',
        item: '送取结果/一对一陪护/一对一陪护',
        remark: '个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介',
        serviceTime: '08:00 - 17:00'
      },
      orderInfo: {
        status: '2',
        code: '634873'
      },
      order_goods_id: this.$route.query.order_goods_id,
      codeArr: [{}, {}, {}, {}, {}, {}],
      numberArr: [],
      currentIndex: null,
      verification_code: ''
      // bodyScrollTop: () => {
      //   this.showKeyboard = true
      //   document.body && (document.body.scrollTop = 0)
      //   window.scrollTo(0, 0)
      // }
    }
  },
  watch: {
    value (value) {
      if (value.length === 6 && value !== this.orderInfo.verification_code) {
        this.errorInfo = '密码错误'
      } else {
        this.errorInfo = ''
      }
    }
  },
  // directives: {
  //   focus: {
  //     componentUpdated: function (el) {
  //       console.log(el)
  //       el.focus()
  //     }
  //   }
  // },
  computed: {
    accompanying_physician_id () {
      return this.$store.state.user.severUserInfo.accompanying_physician_id
    }
  },
  created () {},
  methods: {
    /**
   * 控制输入法下留白问题
   */
    bodyScrollTop () {
      console.log('222')
      this.showKeyboard = true
    },
    cellPhone () {
      window.location.href = `tel:${this.dataInfo.phone}`
    },
    getOrderDetail () {
      getOrderDetails({ order_goods_id: this.order_goods_id }).then(res => {
        if (res.data.errcode === 0) {
          this.orderInfo = res.data.data.orderDetails
          this.orderInfo.payable_amount = this.orderInfo.payable_amount.toFixed(2)
        }
      })
    },
    saveOrder (state, text) { // 抢单/提交核销
      Dialog.confirm({
        title: '提示!',
        message: `确定${text}吗`
      }).then(() => {
        saveOrderGoodsNext({ order_goods_id: this.order_goods_id, state: state, accompanying_physician_id: this.accompanying_physician_id }).then(res => {
          if (res.data.errcode === 0) {
            Toast.success('抢单成功')
            this.getOrderDetail()
          }
        })
      })
    },
    signIn () { // 开始服务
      Dialog.confirm({
        title: '提示！',
        message: '确认开始服务吗'
      }).then(() => {
        saveOrderGoodsNext({ order_goods_id: this.order_goods_id, state: '5', accompanying_physician_id: this.accompanying_physician_id, verification_code: this.orderInfo.verification_code }).then(res => {
          if (res.data.errcode === 0) {
            Toast.success('签到成功')
            this.getOrderDetail()
          }
        })
      })
    },
    verification () { // 核验
      console.log(this.numberArr, this.value)
      if (this.value !== this.orderInfo.verification_code) {
        Toast.fail('请填写完整的确认码')
        return
      }
      this.verification_code = this.numberArr.join('')
      Dialog.confirm({
        title: '提示！',
        message: '确认核验吗'
      }).then(() => {
        saveOrderGoodsNext({ order_goods_id: this.order_goods_id, state: '7', accompanying_physician_id: this.accompanying_physician_id, verification_code: this.value }).then(res => {
          if (res.data.errcode === 0) {
            Toast.success('核验成功')
            this.getOrderDetail()
          }
        })
      })
    },
    evaluate () { // 评价
    },
    // 键盘松开事件
    keyboard (e, index) {
      this.numberArr[index] = e.key
      let domNode = document.getElementsByClassName('inputValue')
      let currInput = domNode[index]
      let nextInput = domNode[index + 1]
      // let lastInput = domNode[index - 1]
      if (e.keyCode != 8) {
        if (index < this.codeArr.length - 1) {
          nextInput.focus()
        } else {
          currInput.blur()
        }
      } else {
        if (index != 0) {
          currInput.focus()
        }
      }
    },
    // 键盘按下触发
    expurgate (index) {
      this.codeArr[index] = ''
    },
    onDelete (e, index) {
      let domNode = document.getElementsByClassName('inputValue')
      let currInput = domNode[index]
      // let nextInput = domNode[index + 1]
      // let frontInput = domNode[index - 1]
      if (e.target.value === '' && index !== 0) {
        currInput.focus()
        this.numberArr[index] = ''
      }
    }
  },
  mounted () {
    console.log(this.$store.state)
    this.getOrderDetail()
  }
}
</script>

<style scoped lang="less">
  .set-content-div {
    bottom: 180px;
    font-family: PingFangSC;
    font-size: 12px;
    padding: 8px;
    font-size: 12px;
    background-color: #F8F8F8;
    min-height: 100%;
    // padding-bottom: 180px;
    position: relative;
    height: auto;
    .head-img {
      background-image: url(../../../../assets/images/详情头部.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 64px;
      border-radius: 5px;
      position: relative;
      .title-div {
        position: absolute;
        height: 17px;
        margin-top: 12px;
        margin-left: 40px;
        color: #F8F8F8;
      }
      .title-div1 {
        position: absolute;
        height: 17px;
        margin-top: 33px;
        margin-left: 40px;
        color: #F8F8F8;
      }
    }
    .info-detail {
      padding: 10px;
      background-color: #FFFFFF;
      border-radius: 8px;
      height: auto;
      .info-detail-title {
        height: 17px;
      }
      .info-detail-name {
        height: 17px;
        line-height: 17px;
        padding: 5px 0px;
      }
    }
    .mt8 {
      margin-top: 8px;
    }
    .mb8 {
      margin-bottom: 8px;
    }
    .mb5 {
      margin-bottom: 5px;
    }
    .appint-detail {
      padding: 10px;
      background-color: #FFFFFF;
      height: 103px;
      border-radius: 8px;
    }
    .color-999 {
      color: #999;
    }
    .color-23 {
      color: #232323;
    }
    #left {
      display: inline-block;
      float: left;
    }
    #right {
      display: inline-block;
      float: right;
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      // bottom: 50px;
      bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
    .input-div {
      width: 30px;
      height: 30px;
      // border: 1px solid gray;
      display: inline-block;
      margin-right: 5px;
      input {
        width:24px;height:24px;text-align: center;font-size: 24px;
        border: 1px solid black;
      }
    }
  }
  .content-div {
    font-family: PingFangSC;
    font-size: 12px;
    padding: 8px;
    font-size: 12px;
    background-color: #F8F8F8;
    min-height: 100%;
    padding-bottom: 60px;
    position: relative;
    height: auto;
    .head-img {
      background-image: url(../../../../assets/images/详情头部.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 64px;
      border-radius: 5px;
      position: relative;
      .title-div {
        position: absolute;
        height: 17px;
        margin-top: 12px;
        margin-left: 40px;
        color: #F8F8F8;
      }
      .title-div1 {
        position: absolute;
        height: 17px;
        margin-top: 33px;
        margin-left: 40px;
        color: #F8F8F8;
      }
    }
    .info-detail {
      padding: 10px;
      background-color: #FFFFFF;
      border-radius: 8px;
      height: auto;
      .info-detail-title {
        height: 17px;
      }
      .info-detail-name {
        height: 17px;
        line-height: 17px;
        padding: 5px 0px;
      }
    }
    .mt8 {
      margin-top: 8px;
    }
    .mb8 {
      margin-bottom: 8px;
    }
    .mb5 {
      margin-bottom: 5px;
    }
    .appint-detail {
      padding: 10px;
      background-color: #FFFFFF;
      height: 103px;
      border-radius: 8px;
    }
    .color-999 {
      color: #999;
    }
    .color-23 {
      color: #232323;
    }
    #left {
      display: inline-block;
      float: left;
    }
    #right {
      display: inline-block;
      float: right;
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      // bottom: 50px;
      bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
    .input-div {
      width: 30px;
      height: 30px;
      // border: 1px solid gray;
      display: inline-block;
      margin-right: 5px;
      input {
        width:24px;height:24px;text-align: center;font-size: 24px;
        border: 1px solid black;
      }
    }
  }
</style>
